<template>
  <div id="one">
    <div id="tow">
      <div id="div1"><h1 @click="fenxiang">分享</h1></div>
      <div id="div2"><a id="a" @click="likebtn">喜欢</a></div>
      
      
    </div>
    <div id="three">
      <h2>发表回复</h2>
      <textarea name="" id="hf" v-model="huifu"></textarea>
      <span @click="fbhf">发表回复</span>
    </div>
    <div id="xg">
      <h2>相关话题</h2>
      <p>{{details.data.data.title}}</p>
      {{details.data.data._id}}
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  export default {
    data:function(){
      return {
        huifu:"",
      }
    },
    methods:{
      fenxiang(){
        window.location.href="http://v3.jiathis.com/code/jiathis_r.js?move=0"
      },
      fbhf(){
        var data ={
          content:this.huifu,
          contentid : this.details.data.data._id
        }
        this.$store.dispatch("huifu",data);
      },
      likebtn(){
        var id = this.details.data.data._id
        this.$store.dispatch("likebtn",id)
        // console.log(id)
      }
    },
    computed:{
      ...mapState([
        "details",
        "title"

      ]) 
    },
    mounted:function(){
      this.$store.dispatch("updata");
      var a = (Math.floor(Math.random()*10+1))
      
    }
  }

</script>

<style scoped>
  h1{
    display: inline-block;
    font-size: 16px;
    color: #e24c7c;
    padding-left: 12px;
  }
  #tow{
    display: flex;
    justify-content: space-between;
    padding-right: 12px;
    padding-left: 12px;
    padding-top: 15px;
    /*border-bottom: 1px solid #eeeeee*/
  }
  #div2{
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    padding-top: 4px;
    vertical-align:bottom;
    border-radius: 3px;
  }
  a{
    display: block;
    width: 50px;
    height: 30px;
    background-color: pink;
    color: rgb(139, 139, 139);
    text-decoration: none;
    border-radius: 3px;
  }
  #three{
    padding-top: 10px;
    padding-left: 12px;
    padding-bottom: 12px;
  }
  #hf{
    height: 117px;
  }
  h2{
    display: block;
    font-size: 15px;
  }
  textarea{
    width: 95%;
  }
  span{
    display: inline-block;
    width: 100px;
    height: 35px;
    margin-top: 10px;
    background-color: #e24c7c;
    text-align: center;
    line-height: 35px;
    color: white;
    font-size: 15px;
  }
  #xg{
    background-color:rgb(238, 238, 238);
    padding-top: 10px;
    width: 100%;
    padding-left: 12px;
  }
  #a{
    vertical-align:bottom;
  }
</style>